<template>
  <el-collapse class="elCollapse" v-model="activeName" accordion>
    <el-collapse-item title="还车结算" name="1">
      <div style="padding: 20px">
        <!--待扣费用-->
        <withheldExpense :rule-form="ruleForm"/>

        <el-form :model="ruleForm" ref="ruleForm" :label-position="labelPosition"
                 :class="isEdit?'':'formItem'">


          <!--查询关联订单-->
          <el-row :gutter="24">
            <el-col :span="24">
              <orderTable :rule-form="ruleForm"/>
            </el-col>
          </el-row>

          <!--保证金抵扣-->
          <el-row :gutter="24">
            <el-col :span="8">
              <span>保证金抵扣</span>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="车辆保证金:">
                <el-input v-thousand v-if="isEdit" v-model="ruleForm.carCount"/>
                <span v-else> {{ format_thousand(ruleForm.carCount) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否使用保证金抵扣:">
                <el-radio-group v-if="isEdit" v-model="ruleForm.resource">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
                <span v-else>{{ ruleForm.resource === 1 ? '是' : '否' }}</span>
              </el-form-item>
            </el-col>

          </el-row>

          <!--自定义减免项-->
          <el-row :gutter="24">
            <el-col :span="8">
              <span>自定义减免项</span>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="24">
              <el-table :data="ruleForm.businessList" border size='mini'>

                <el-table-column align="center" prop="insuranceQuota" label="减免项名称">
                  <template #default="{row,$index}">
                    <el-select v-model="row.insuranceQuota" v-if="isEdit" style="width: 100%"
                               @change="handleSelect(row, $index)"
                               placeholder="请选择减免项"
                               size="mini">
                      <el-option v-for="item in dict.type.deduction_tye" :label="item.label" :value="item.value"
                                 :key="item.value"/>

                    </el-select>
                    <span v-else>{{ row.insuranceQuota }}</span>
                  </template>
                </el-table-column>

                <el-table-column align="center" label="减免金额"/>

                <el-table-column align="center" label="减免原因"/>


                <template v-slot:append
                          v-if="isEdit &&  dict.type.deduction_tye.length !== ruleForm.businessList.length">
                  <div class="flex-xy-center" style="height: 40px">
                    <div style="display: flex">
                      <e-button type="text" style="margin-right: 20px" icon="eel-icon-plus"
                                @click="handleTableColumn">添加
                      </e-button>
                    </div>

                  </div>
                </template>
              </el-table>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="情况说明:">
                <image-common v-model="ruleForm.syxPolicyUrl" :disabled="!isEdit" :limit="20" :upType="2"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="应退金额:">
                <el-input v-thousand v-if="isEdit" v-model="ruleForm.carCount"/>
                <span v-else> {{ format_thousand(ruleForm.carCount) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="补缴金额:">
                <el-input v-thousand v-if="isEdit" v-model="ruleForm.carCount"/>
                <span v-else> {{ format_thousand(ruleForm.carCount) }}</span>
              </el-form-item>
            </el-col>

          </el-row>

          <!--退款账户-->
          <el-row :gutter="24">
            <el-col :span="8">
              <span>退款账户</span>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="开户银行:">
                <el-input v-if="isEdit" v-model="ruleForm.carCount"/>
                <span v-else> {{ ruleForm.carCount }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="账户:">
                <el-input v-if="isEdit" v-model="ruleForm.carCount"/>
                <span v-else> {{ ruleForm.carCount }}</span>
              </el-form-item>
            </el-col>

          </el-row>


        </el-form>

      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  name: 'returnCarSettleMessage',//还车结算
  dicts: ['deduction_tye'],
  components: {
    withheldExpense: () => import('./withheldExpense.vue'),
    orderTable: () => import('./orderTable.vue')
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      },
    },
    state: {
      type: String,
      default: "",
    },
  },

  computed: {
    ruleForm: {
      get() {
        let that = this
        const proxy = new Proxy(that.value, {
          get(target, key, value) {
            return Reflect.get(target, key)
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        })
        return proxy
      }
    },
    labelPosition() {
      if (this.state === 'write') {
        return 'top'
      } else {
        return 'right'
      }
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool
    }
  },
  watch: {},
  data() {
    return {
      activeName: ['1']
    };
  },
  created() {
    console.log(this.state, "-this.state--")
  },
  mounted() {
  },
  methods: {
    handleSelect(row, index) {
      for (let i = 0; i < this.ruleForm.businessList.length; i++) {
        if (index !== i) {
          if (row.insuranceQuota === this.ruleForm.businessList[i].insuranceQuota) {
            this.$message({
              type: "warning",
              message: "减免项名称已存在",
            });
            row.insuranceQuota = ''
            break
          }
        }
      }
    },

    handleTableColumn() {
      let obj = {
        insuranceQuota: ''
      }
      this.ruleForm.businessList.push(obj)
    }
  },
};
</script>

<style lang="scss" scoped src="@/styles/cwgd/formScss.scss"/>


